<template>
	<view class="body" style="min-height: 1400rpx;">
		<view class="header">订单确认</view>
		<!-- 选择地址栏 -->
		<view>
			<view class="outer-box choose-address" @click="addAddress">
				<image src="@/static/address/address-choose.png" style="width: 80rpx;height: 80rpx;"></image>
				<text style="font-weight: bold;">选 择 地 址</text>
				<view style="width: 50rpx;"></view>
			</view>

			<view class="outer-box" style="height: 150rpx;">
				<uni-row>
					<uni-col :span="4">
						<view class="confirm-address-image">
							<image src="@/static/address/information.png" style="width: 80rpx;height: 80rpx;">
							</image>
						</view>
					</uni-col>
					<uni-col :span="20">
						<view style="height: 150rpx;">
							<view style="height: 10%;" />

							<view style="height: 30%;font-weight: bold;">
								<text>{{userInfo[0]==null?'':userInfo[0].name}}</text></br>
							</view>

							<view class="address-font-box">
								<text class="address-font">{{userInfo[0]==null?'':userInfo[0].address}}</text>
							</view>
							<view style="height: 10%;" />
						</view>
					</uni-col>
				</uni-row>
			</view>
		</view>
		<!-- 订单商品栏 -->
		<view class="goods-list-box">
			<myOrderList :goodsList="goodsList"></myOrderList>
		</view>

		<uni-section title="上门时间" type="line" style="margin: 20rpx auto;width: 700rpx;">
			<uni-datetime-picker v-model="date_time" />
		</uni-section>

		<uni-section title="物品数量" type="line" style="margin: 20rpx auto;width: 700rpx;">
			<uni-easyinput type="text" v-model="number"></uni-easyinput>
		</uni-section>

		<uni-section title="物品情况描述" type="line" style="margin: 20rpx auto;width: 700rpx;">
			<uni-easyinput type="textarea" v-model="content"></uni-easyinput>
		</uni-section>

		<uni-section title="相关图片" type="line" style="margin: 20rpx auto;width: 700rpx;">
			<uni-file-picker file-mediatype="image" :limit="6" return-type="array" v-model="imgs"></uni-file-picker>
		</uni-section>

		<view style="height: 150rpx;">
		</view>

		<!-- 总计栏 -->
		<view class="submit-box">
			<uni-row>
				<uni-col :span="12">
					<view style="margin-left: 20rpx;">
						<text style="font-weight: bold;font-size: 30rpx;">共{{goodsList.length}}件</text>
						</br>
						<text style="font-weight: bold;font-size: 30rpx;">合计</text>
						<text class="yuan-font">￥</text><text class="price-font">
							{{convert(totalPrice).integer}}.
						</text>
						<text class="price-font">
							{{convert(totalPrice).point}}
						</text>
					</view>
				</uni-col>
				<uni-col :span="12">
					<view style="margin-top: 20rpx;">
						<button @click="submit()">
							预约上门
						</button>
					</view>
				</uni-col>
			</uni-row>
		</view>
	</view>
</template>

<script>
	import myOrderList from '@/components/myOrderList/myOrderList.vue'
	const db = uniCloud.database();
	const dbCmd = db.command

	export default {
		data() {
			return {
				totalPrice: 0,
				goodsList: [],
				address_id: '',
				userInfo: [{
					'name': ' ',
					'addresss': ' '
				}],
				date_time: null,
				content: ' ',
				number: 1,
				imgs: []
			}
		},
		onLoad(option) {
			this.goodsList[0] = JSON.parse(decodeURIComponent(option.goods))
			this.totalPrice = JSON.parse(decodeURIComponent(option.goods)).goods_price
			this.getAddress()
		},
		onShow() {
			this.getAddress()
		},
		methods: {
			convert(money) {
				return {
					integer: Math.floor(money / 100),
					point: money % 100
				}
			},
			addAddress() {
				uni.navigateTo({
					url: '/pages/uni-id-address/list'
				})
			},
			async getGoodsList() {
				const db = uniCloud.database();
				const dbCmd = db.command
				let res = await db.collection('opendb-mall-goods').where({
					_id: dbCmd.in([...this.$store.state.goodsIds])
				}).get()
				this.goodsList = res.result.data
				this.totalPrice = this.$store.state.totalPrice
			},
			async getAddress() {
				let res = await db.collection('uni-id-address').where({
					'_id': this.$store.state.addressId
				}).get()
				this.userInfo = res.result.data
			},
			async submit() {
				if (this.$store.state.addressId == '') {
					uni.showToast({
						title: '请选择地址',
						icon: "error",
						duration: 800,
						mask: true
					})
					return
				}
				if (!this.check()) {
					return
				}
				await db.collection('uni-id-base-order').add({
					"goods_id": this.goodsList[0]._id,
					"content": this.content,
					"imgs": this.imgs,
					"date_time": this.date_time,
					"number": this.number,
					"title": this.goodsList[0].name,
					"address_id": this.$store.state.addressId,
					"status": 0,
					"price": this.goodsList[0].goods_price
				}).then(res => {
					uni.showToast({
						title: '预约成功',
						icon: 'success',
						duration: 800
					})
					setTimeout(function() {
						uni.navigateBack()
					}, 500);
				}).catch(e => {
					console.log('预约错误' + e)
					uni.showToast({
						title: '预约失败',
						icon: "error",
						duration: 800,
						mask: true
					})
				})
			},
			check() {
				let flag = true
				if (this.date_time == null) {
					uni.showModal({
						content: '请选择上门时间',
						showCancel: false
					});
					flag = false
				}
				return flag
			}
		},
		components: {
			myOrderList: myOrderList
		}
	}
</script>

<style scoped>
	.confirm-address-image {
		height: 150rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.choose-address {
		height: 100rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.address-font {
		font-size: 24rpx;
		color: #8a8a8a;
		height: 50%;
	}

	.address-font-box {
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
	}


	.header {
		width: 750rpx;
		height: 105rpx;
		background-color: #f9f9fc;
		line-height: 105rpx;
		text-align: center;
		font-weight: bold;
		font-size: 18px;
		margin-bottom: 10rpx;
	}


	.submit-box {
		width: 100%;
		height: 120rpx;
		position: fixed;
		bottom: 0;
		background-color: #fff;
	}

	.submit-box button {
		width: 250rpx;
		height: 80rpx;
		border-radius: 36rpx;
		background: linear-gradient(to right, #9be8e8, #5bcde6);
		text-align: center;
		line-height: 80rpx;
		color: #FFF;
		font-size: 36rpx;
		font-weight: bold;
	}

	.outer-box {
		background-color: #ffffff;
		width: 710rpx;
		margin: 0 auto 26rpx;
		border-radius: 18rpx;
		overflow: hidden;
	}

	.goods-list-box {
		width: 710rpx;
		overflow: hidden;
		text-align: center;
		margin: 0 auto 0rpx;
	}

	.uni-container {
		padding: 15px;
	}

	.uni-input-border,
	.uni-textarea-border {
		width: 100%;
		font-size: 14px;
		color: #666;
		border: 1px #e5e5e5 solid;
		border-radius: 5px;
		box-sizing: border-box;
		background-color: white;
	}

	.uni-input-border {
		padding: 0 10px;
		height: 35px;

	}

	.uni-textarea-border {
		padding: 10px;
		height: 80px;
	}

	.uni-button-group {
		margin-top: 50px;
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		justify-content: center;
	}

	.uni-button {
		width: 184px;
		padding: 12px 20px;
		font-size: 14px;
		border-radius: 4px;
		line-height: 1;
		margin: 0;
	}

	/* 选择地址 */
	.confirm-address-image {
		height: 150rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.choose-address {
		height: 100rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.address-font {
		font-size: 24rpx;
		color: #8a8a8a;
		height: 50%;
	}

	.address-font-box {
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
	}

	.outer-box {
		background-color: #ffffff;
		width: 710rpx;
		margin: 0 auto 26rpx;
		border-radius: 18rpx;
		overflow: hidden;
	}
</style>